<template>
  <div class="module_header">
    <!-- 工序信息 -->
    <h4>
      <span>{{ title }}</span>
      <span>{{ params.status ? `【${params.status}】` : '' }}</span>
    </h4>
    <!-- 功能模块 -->
    <!-- <div class="AAL001">
      <span>{{ meter }}</span>
    </div> -->
    <!-- 操作按钮 -->
    <div class="operation">
      <el-popconfirm
        confirm-button-text="确认"
        cancel-button-text="取消"
        icon="el-icon-info"
        icon-color="red"
        title="确定将此记录的数据绑定到表上？"
        @confirm="confirmReport"
      >
        <el-button slot="reference" type="success" size="mini" icon="el-icon-upload2">
          上报
        </el-button>
      </el-popconfirm>
      <el-popconfirm
        confirm-button-text="确定"
        cancel-button-text="取消"
        icon="el-icon-info"
        icon-color="red"
        title="确定重置当前工序？"
        @confirm="resetCurrent"
      >
        <el-button slot="reference" size="mini" type="primary" icon="el-icon-set-up">
          重置
        </el-button>
      </el-popconfirm>
      <el-popconfirm
        confirm-button-text="确定"
        cancel-button-text="取消"
        icon="el-icon-info"
        icon-color="red"
        title="确定切换为【关闭】状态？"
        @confirm="closeCurrent"
      >
        <el-button slot="reference" size="mini" type="danger" icon="el-icon-circle-close">
          关闭
        </el-button>
      </el-popconfirm>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component, Prop } from 'vue-property-decorator'
import { ReportType } from '@/api/procedure'
import { ReportProcedureData } from '@/api/procedure'
import { AxiosResponse } from 'axios'
import { Dictionary } from '@/interface/Basic'
@Component
class ModuleHeader extends Vue {
  @Prop({ required: true }) title!: string
  @Prop() status!: string
  @Prop({ default: '' }) meter!: string
  @Prop({ required: true }) params!: Dictionary<string>
  replaceCuttingNumber: boolean = false
  confirmReport() {
    // 判断工序名称和工序状态是否为空
    const { Id, Bore, Cutting, status, module } = this.params
    if (this.title === '' || status === '') {
      this.$message({
        type: 'warning',
        message: '工序名及工序状态不能为空'
      })
      return
    }
    if (!Id) {
      this.$message({
        type: 'warning',
        message: '未选中记录 ID， 不允许上报'
      })
      return
    }
    if (!Cutting && Cutting !== '') {
      const reportParams: ReportType = {
        Id,
        Status: status,
        Bore,
        Number: this.meter,
        Cutting: null,
        DatabaseLabel: module,
        Process: this.title
      }
      ReportProcedureData(reportParams).then((res: AxiosResponse<{ Message: string }>) => {
        const { Message } = res.data
        this.$message({
          type: 'success',
          message: Message
        })
        this.$broadEmit('onProcedureReport')
      })
      return
    } else {
      this.$confirm('是否用该记录下的表体编号替代主页面的表体编号【默认不允许替代】', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        showClose: false,
        closeOnClickModal: false,
        callback: action => {
          const isAllowReplace = action === 'confirm'
          const reportParams: ReportType = {
            Id,
            Status: status,
            Bore,
            Number: this.meter,
            Cutting: isAllowReplace ? Cutting : null,
            DatabaseLabel: module,
            Process: this.title
          }
          ReportProcedureData(reportParams).then((res: AxiosResponse<{ Message: string }>) => {
            const { Message } = res.data
            this.$message({
              type: 'success',
              message: Message
            })
            this.$broadEmit('onProcedureReport')
          })
        }
      })
    }
  }
  resetCurrent() {
    this.$broadEmit('onProcedureReset', {
      Procname: this.title,
      Number: this.meter
    })
  }
  closeCurrent() {
    this.$broadEmit('onProcedureClose', {
      Procname: this.title,
      Number: this.meter
    })
  }
}
export default ModuleHeader
</script>

<style lang="less" scoped>
@import '~@/styles/theme.less';
@import '~@/styles/layout.less';
.module_header {
  width: 100%;
  margin-bottom: 10px;
  #flex(row, center, space-between);
  h4 {
    margin-block: 0;
    font-size: 18px;
    font-weight: 800;
    white-space: nowrap;
    #color(color, --primary-text-color);
  }
  .AAL001 {
    span {
      display: block;
      box-sizing: border-box;
      font-size: 20px;
      font-weight: 900;
      white-space: nowrap;
      color: #ffffff;
      #color(color, --primary-blue-color);
    }
  }
  .operation {
    #flex(row, center, space-between);
    /deep/.el-button {
      margin-left: 10px;
      span {
        margin-left: 3px;
      }
    }
  }
}
.before-report {
  #flex(column, center, flex-start);
  .report-form {
    box-sizing: border-box;
    padding-bottom: 8px;
    margin-bottom: 8px;
    width: 100%;
    border-bottom: solid 1px;
    #color(border-bottom-color, --primary-border-color);
    header {
      margin-bottom: 5px;
      width: 100%;
      font-size: 12px;
      text-align: left;
      #color(color, --primary-text-color);
    }
    /deep/.el-button {
      width: 100%;
    }
  }
  .report-form:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: solid 0;
  }
}
</style>
